<template>
    <div class="jianzhan-content">
        <Crumb name="Employee"/>
        <div class="content">
            <el-button size="small" type="primary" @click="open">Add Employee</el-button>
            <Search>
                <el-input v-model="key" class="input" size="small" placeholder="Search by employee name"
                          prefix-icon="el-icon-search"/>
            </Search>
            <div class="table-wrapper">
                <el-table
                        border
                        stripe
                        :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                >
                    <el-table-column prop="employeeName" label="Name"/>
                    <el-table-column prop="position" label="Title"/>
                    <el-table-column prop="manager" label="Manager"/>
                    <el-table-column prop="employeeNum" label="Id"/>
                    <!--<el-table-column prop="email" label="Email"/>-->
                    <el-table-column prop="handPhone" label="Telephone"/>
                    <el-table-column prop="contractStartDate" label="On board"/>
                    <el-table-column label="Operate" width="220">
                        <template slot-scope="employee">
                            <el-button @click="showDetail(employee.row)" size="small">Modify</el-button>
                            <el-button @click="deleteEmp(employee.row)" size="small" type="danger">Delete
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"/>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="Employee" width="80%">
            <el-form :model="employee" ref="employeeForm" label-width="200px">
                <el-form-item required label="Employee Name">
                    <el-input size="small" v-model="employee.employeeName"/>
                </el-form-item>
                <el-form-item required label="Title">
                    <el-input size="small" v-model="employee.position"/>
                </el-form-item>
                <el-form-item label="Manager">
                    <el-input size="small" v-model="employee.manager"/>
                </el-form-item>
                <el-form-item required label="Employee ID">
                    <el-input size="small" v-model="employee.employeeNum"/>
                </el-form-item>
                <el-form-item label="place At Workshop">
                    <el-input size="small" v-model="employee.placeAtWorkshop"/>
                </el-form-item>
                <el-form-item label="handPhone">
                    <el-input size="small" v-model="employee.handPhone"/>
                </el-form-item>
                <el-form-item required label="On board">
                    <el-date-picker v-model="employee.contractStartDateStr" style="width: 100%" size="small" value-format="yyyy-MM-dd"/>
                </el-form-item>
                <el-form-item label="nomorKtp">
                    <el-input size="small" v-model="employee.nomorKtp"/>
                </el-form-item>
                <el-form-item label="noKk">
                    <el-input size="small" v-model="employee.noKk"/>
                </el-form-item>
                <el-form-item label="birthday">
                    <el-input size="small" v-model="employee.birthday"/>
                </el-form-item>
                <el-form-item label="pendidikan">
                    <el-input size="small" v-model="employee.pendidikan"/>
                </el-form-item>
                <el-form-item label="agama">
                    <el-input size="small" v-model="employee.agama"/>
                </el-form-item>
                <el-form-item  label="maritalStatus">
                    <el-input size="small" v-model="employee.maritalStatus"/>
                </el-form-item>
                <el-form-item  label="alamat">
                    <el-input size="small" v-model="employee.alamat"/>
                </el-form-item>
                <el-form-item  label="Working Experience">
                    <el-input size="small" v-model="employee.workingExperience"/>
                </el-form-item>
                <el-form-item  label="BankCard Number">
                    <el-input size="small" v-model="employee.bankCardNumber"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapGetters, mapActions, mapMutations} from 'vuex'
    import mixins from '../../util/mixins'
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {addEmployee,modEmplyee} from "../../api";
    import {ERROR_OK} from "../../util/config";
    import {getArray} from "../../util";
    import {getDepartmentList} from "../../api/auth";
    import {clear} from "../../util";

    export default {
        name: "employee",
        mixins: [mixins],
        data() {
            return {
                key: '',
                employee: {
                    id:'',
                    employeeName: '',
                    position: '',
                    manager: '',
                    employeeNum: '',
                    placeAtWorkshop:'',
                    handPhone:'',
                    contractStartDateStr:'',
                    nomorKtp:'', //身份证
                    noKk:'',
                    birthday:'',
                    pendidikan:'', //受教育
                    agama:'',    //宗教
                    maritalStatus:'',//婚宴
                    alamat:'',   //地址
                    workingExperience:'',
                    bankCardNumber:''
                },
                dialogVisible: false,
                departmentList:[]
            }
        },
        created() {
            this.loadEmployeeList();
            this._getDepartment();
        },
        computed: {
            spreadDeptList() {
                return getArray(this.departmentList)
            },
            list() {
                return this.employeeList.filter(item => item.employeeName.toLowerCase().indexOf(this.key.toLowerCase()) > -1)
            },
            ...mapGetters(['employeeList'])
        },
        mounted() {
            this.total = this.list.length
        },
        methods: {
            async _getDepartment() {
                let {status, data} = await getDepartmentList();
                if (status === ERROR_OK) {
                    this.departmentList = data
                }
            },
            open() {
                this.dialogVisible = true;
                clear();
            },

            submitForm() {
                this.$refs.employeeForm.validate(async valid => {
                    if (valid) {
                        if (this.employee.id) {
                            const {status} = await modEmplyee(this.employee);
                            if (status === ERROR_OK) {
                                this.modEmployee(this.employee);
                                this.dialogVisible = false
                            }
                        } else {
                            const {status, data} = await addEmployee(this.employee);
                            if (status === ERROR_OK) {
                                this.employee.id = data.id;
                                this.addEmployee(this.employee);
                                this.dialogVisible = false
                            }
                        }
                    }
                })
            },
            deleteEmp() {
                // this.$confirm(
                //     'Do you want to delete this employee ?'
                // ).then(async () => {
                //     const {status} = await deleteUser(employee.id);
                //     if(status === ERROR_OK) {
                //         this.deleteEmployee(employee);
                //     }
                // }).catch(() => {
                //
                // })
            },
            showDetail(employee) {
                this.employee = employee;
                this.dialogVisible = true
            },
            ...mapMutations(['addEmployee','modEmployee','deleteEmployee']),
            ...mapActions(['loadEmployeeList']),
        },
        watch: {
            list(list) {
                this.total = list.length
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
</style>